<template>
	<div class="shujufenxi">
		<div class="shipinbiaoxian1">
			<div class="waicengqu">
				<div class="shouye_tou2">
					<span>数据趋势</span>
				</div>
				<div class="bianhua">
					<div class="bianhua1">
						<ul>
							<li>近7天</li>
							<li>近30天</li>
						</ul>
					</div>
					<div class="shijian">
						<el-date-picker
						      v-model="value2"
						      type="daterange"
						      align="right"
						      unlink-panels
						      range-separator="至"
						      start-placeholder="开始日期"
						      end-placeholder="结束日期"
						      :picker-options="pickerOptions">
						    </el-date-picker>
					</div>
					<div class="bianhua2">
						<ul>
							<li>总量</li>
							<li>增量</li>
						</ul>
					</div>
				</div>
			</div>
			
			<div id="c1"></div>
			<div id="c2" style="margin-top:2rem ;"></div>
		</div>
		
		<div class="meiri">
			<div class="meirilie">
				<span>每日数据列表</span>
			</div>
			
			<table cellpadding="0" cellspacing="0">
				<thead>
					<tr>
						<th>日期</th>
						<th>总访客数</th>
						<th>访客数增量</th>
						<th>总销量</th>
						<th>销量增加</th>
					</tr>
				</thead>
				
				<tbody>
					<tr v-for="(item,index) in 5" :key="index">
						<td>2020-10-31</td>
						<td>{{shu | guolv}}</td>
						<td>{{shu | guolv}}</td>
						<td>{{shu1 | guolv}}</td>
						<td>{{shu1 | guolv}}</td>
					</tr>
				</tbody>
			</table>
			
			<div class="fenye" style="text-align: center;margin-top:0.5rem ;">
				<el-pagination
				  @size-change="handleSizeChange"
				  @current-change="handleCurrentChange"
				  :hide-on-single-page="yindi"
				  :current-page="currentPage4"
				  :page-sizes="[100, 200, 300, 400]"
				  :page-size="100"
				  layout="total, sizes, prev, pager, next, jumper"
				  :total="4001">
				</el-pagination>
			</div>
			
		</div>
	</div>
</template>

<script>
	import { Chart } from '@antv/g2';
	export default{
		data(){
			return{
				tuZonggao:'',
				shu:544152,
				shu1:323,
				tudata2:[
					 { month: '10-03', city: '访客数总量', temperature: -2000 },
					  { month: '10-04', city: '访客数总量', temperature: -1990 },
					  { month: '10-05', city: '访客数总量', temperature: -1980 },
					  { month: '10-06', city: '访客数总量', temperature: -1970 },
					  { month: '10-07', city: '访客数总量', temperature: -1960 },
					  { month: '10-08', city: '访客数总量', temperature: -1950 },
					  { month: '10-09', city: '访客数总量', temperature: -1940 },
					  { month: '10-10', city: '访客数总量', temperature: -1930 },
					  { month: '10-11', city: '访客数总量', temperature: 2342 },
					  { month: '10-12', city: '访客数总量', temperature: 3443 },
					  { month: '10-13', city: '访客数总量', temperature: 4544 },
					  { month: '10-14', city: '访客数总量', temperature: 5645 },
					  { month: '10-15', city: '访客数总量', temperature: 6746 },
					  { month: '10-16', city: '访客数总量', temperature: 7847 },
					  { month: '10-17', city: '访客数总量', temperature: 8948 },
					  { month: '10-18', city: '访客数总量', temperature: 9049 },
					  { month: '10-19', city: '访客数总量', temperature: 2350 },
					  { month: '10-20', city: '访客数总量', temperature: 11252 },
					  { month: '10-21', city: '访客数总量', temperature: 5685 },
					  { month: '10-22', city: '访客数总量', temperature: 2642 },
					  { month: '10-23', city: '访客数总量', temperature: 8463},
					  { month: '10-24', city: '访客数总量', temperature: 1234 },
					  { month: '10-25', city: '访客数总量', temperature: 5843 },
					  { month: '10-26', city: '访客数总量', temperature: 20658 },
				],
				tudata1:[
					 { month: '10-03', city: '销量总量', temperature: -2000 },
					  { month: '10-04', city: '销量总量', temperature: -1000 },
					  { month: '10-05', city: '销量总量', temperature: 0 },
					  { month: '10-06', city: '销量总量', temperature: 1000 },
					  { month: '10-07', city: '销量总量', temperature: 4000 },
					  { month: '10-08', city: '销量总量', temperature: 8000 },
					  { month: '10-09', city: '销量总量', temperature: 12000 },
					  { month: '10-10', city: '销量总量', temperature: 16000 },
					  { month: '10-11', city: '销量总量', temperature: 20000 },
					  { month: '10-12', city: '销量总量', temperature: 15000 },
					  { month: '10-13', city: '销量总量', temperature: 14000 },
					  { month: '10-14', city: '销量总量', temperature: 13000 },
					  { month: '10-15', city: '销量总量', temperature: 12000 },
					  { month: '10-16', city: '销量总量', temperature: 11000 },
					  { month: '10-17', city: '销量总量', temperature: 10000 },
					  { month: '10-18', city: '销量总量', temperature: 9000 },
					  { month: '10-19', city: '销量总量', temperature: 8000 },
					  { month: '10-20', city: '销量总量', temperature: 7000 },
					  { month: '10-21', city: '销量总量', temperature: 6000 },
					  { month: '10-22', city: '销量总量', temperature: 5000 },
					  { month: '10-23', city: '销量总量', temperature: 4000},
					  { month: '10-24', city: '销量总量', temperature: 3000 },
					  { month: '10-25', city: '销量总量', temperature: 2000 },
					  { month: '10-26', city: '销量总量', temperature: 1000 },
				],
				
				//日期选择器
				 pickerOptions: {
				  shortcuts: [{
					text: '最近一周',
					onClick(picker) {
					  const end = new Date();
					  const start = new Date();
					  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
					  picker.$emit('pick', [start, end]);
					}
				  }, {
					text: '最近一个月',
					onClick(picker) {
					  const end = new Date();
					  const start = new Date();
					  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
					  picker.$emit('pick', [start, end]);
					}
				  }, {
					text: '最近三个月',
					onClick(picker) {
					  const end = new Date();
					  const start = new Date();
					  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
					  picker.$emit('pick', [start, end]);
					}
				  }]
				},
				value1: '',
				value2: '',
				
				//分页
				yindi:true,//当数据是由一页时，就不显示分页器
				currentPage4: 1
			}
		},
		//过滤器
		filters:{
			guolv(shuzi){
				  if(shuzi>0){
					var wan=parseInt(shuzi).toString();
					var qumo=wan%10000;
					//粉丝数改变
					if(wan.length<5){
						shuzi=wan;
					}else if(wan.length>4 && wan.length<=8){
						let fen_si=parseFloat(parseInt(wan/10000))+'.'+qumo.toString().substring(0,2)+'w';
						shuzi=fen_si;
					}else if(wan.length>8){
						let fen_si=parseFloat(parseInt(wan/100000000))+'.'+qumo.toString().substring(0,2)+'亿';
						shuzi=fen_si;
					}
				  }
				  return shuzi
			}
		},
		mounted(){
			this.tuZonggao=document.body.offsetWidth*0.3;
			console.log(this.tuZonggao)
			
			$(window).resize(()=>{
				this.tuZonggao=document.body.offsetWidth*0.2;
			})
			
			this.tubiao1();
			this.tubiao2();
			
			
			$(".bianhua1 ul li").click(function(){
				$(this).css({
					'background-color': '#0091FF',
					'color': '#fff',
					'border': '1px solid #0091FF',
				})
				$(this).siblings().css({
					'background-color': '#fff',
					'color': '#0091FF',
					'border': '1px solid #D4D4D4',
				})
			})
			
			$(".bianhua2 ul li").click(function(){
				$(this).css({
					'background-color': '#0091FF',
					'color': '#fff',
					'border': '1px solid #0091FF',
				})
				$(this).siblings().css({
					'background-color': '#fff',
					'color': '#0091FF',
					'border': '1px solid #D4D4D4',
				})
			})
		},
		methods:{
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			},
			
			tubiao1(){
				const chart = new Chart({
				  container: 'c1',
				  autoFit: true,
				  height: this.tuZonggao,
				});
				
				chart.data(this.tudata2);
				chart.scale('temperature',{
				  ticks:[-3000,0,3000,6000,9000,12000,15000,18000,21000],
				  alias:'访客数总量'
				});
				
				chart.tooltip({
				  showCrosshairs: true,
				  shared: true,
				});
				
				chart.axis('temperature', {
				  title: {},
				  label: {
				    formatter: (val) => {
				      return val + ' ';
				    },
				  },
				});
				
				chart.legend({
					position:'top'
				});
				
				chart
				  .line()
				  .position('month*temperature')
				  .color('city')
				  .shape('smooth');
				
				chart
				  .point()
				  .position('month*temperature')
				  .color('city')
				  .shape('circle')
				  .style({
				    stroke: '#fff',
				    lineWidth: 1,
				  });
				
				chart.render();
			},
			tubiao2(){
				const chart = new Chart({
				  container: 'c2',
				  autoFit: true,
				  height: this.tuZonggao,
				});
				
				chart.data(this.tudata1);
				chart.scale('temperature',{
				  ticks:[-3000,0,3000,6000,9000,12000,15000,18000,21000],
				  alias:'销量总量'
				});
				
				chart.tooltip({
				  showCrosshairs: true,
				  shared: true,
				});
				
				chart.axis('temperature', {
				  title: {},
				  label: {
				    formatter: (val) => {
				      return val + ' ';
				    },
				  },
				});
				
				chart.legend({
					position:'top'
				});
				
				chart
				  .line()
				  .position('month*temperature')
				  .color('city')
				  .shape('smooth');
				
				chart
				  .point()
				  .position('month*temperature')
				  .color('city')
				  .shape('circle')
				  .style({
				    stroke: '#fff',
				    lineWidth: 1,
				  });
				
				chart.render();
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.shujufenxi{
		
		.shipinbiaoxian1{
			background-color: #fff;
			border-radius:0.1rem ;
			margin-top:1rem ;
			
			.waicengqu{
				margin-bottom:0.8rem ;
				.shouye_tou2{
					height: 100%;
					float: left;
					box-sizing: border-box;
					position: relative;
					margin-bottom:0.8rem ;
					
					span{
						font-size: 0.45rem;
						display: inline-block;
						margin-left:0.6rem ;
						margin-top:0.7rem ;
					}
					
					span::before{
						content: "";
						display: block;
						position: absolute;
						top: 0.6rem;
						left: 0;
						width: 0.2rem;
						height: 0.8rem;
						background-color: #1890FF;
					}
				}
				.bianhua{
					float: right;
					display: flex;
					align-items: center;
					padding-top:0.6rem ;
					
					.bianhua1{
						margin-right:1rem ;
						ul{
							list-style: none;
							
							li{
								cursor: pointer;
								float: left;
								color: #0091FF;
								border:1px solid #D4D4D4 ;
								font-size: 0.4rem;
								padding: 0.1rem 0.3rem;
							}
							li:nth-of-type(1){
								background-color: #0091FF;
								color: #fff;
								border: 1px solid #0091FF;
							}
						}
						ul::after{
							content: "";
							display: block;
							clear: both;
						}
					}
					.shijian{
						height: 1rem;
						margin-top:-0.9rem ;
					}
					.bianhua2{
						margin-left:1rem ;
						ul{
							list-style: none;
							
							li{
								cursor: pointer;
								float: left;
								color: #0091FF;
								border:1px solid #D4D4D4 ;
								font-size: 0.4rem;
								padding: 0.1rem 0.3rem;
							}
							li:nth-of-type(1){
								background-color: #0091FF;
								color: #fff;
								border: 1px solid #0091FF;
							}
							
						}
						ul::after{
							content: "";
							display: block;
							clear: both;
						}
					}
				}
			}
			.waicengqu::after{
				content: "";
				display: block;
				clear: both;
			}
		}
		
		.meiri{
			margin-top:1rem ;
			
			.meirilie{
				height: 100%;
				box-sizing: border-box;
				position: relative;
				margin-bottom:0.8rem ;
				
				span{
					font-size: 0.45rem;
					display: inline-block;
					margin-left:0.6rem ;
					margin-top:0.7rem ;
				}
				
				span::before{
					content: "";
					display: block;
					position: absolute;
					top: 0.6rem;
					left: 0;
					width: 0.2rem;
					height: 0.8rem;
					background-color: #1890FF;
				}
			}
			
			table{
				width: 100%;
				
				tr:hover td{
					background-color: #E5F4FF;
				}
				th{
					color: #333333;
					font-size: 0.45rem;
					padding: 0 0 0.6rem 0;
					font-weight: normal;
				}
				td{
					color: #666666;
					font-size: 0.4rem;
					padding: 0.4rem 0;
					text-align: center;
				}
			}
		}
	}
</style>
